<template>
	<div class="chat-message" v-if="MessageModalShow">
		<view class="center_box center_box_img"  :style="lang=='zh'?'width: 336px;':'width: 336px;'">
			<view class="center_box_top" style="color: #796A51;font-weight: bold;" v-if="lang=='zh'" :style="lang=='zh'?'line-height: 50px':'line-height: 50px;white-space: pre-wrap;word-wrap: break-word;word-break: break-all;'">
				{{order.professional.name}}{{$t('语音')}}
			</view>
			<view class="center_box_top" style="color: #796A51;font-weight: bold;" v-if="lang=='ru'" :style="lang=='zh'?'line-height: 50px':'line-height: 50px;white-space: pre-wrap;word-wrap: break-word;word-break: break-all;'">
				{{order.professional.name_ru}}
			</view>
			<view class="center_box_center width-all flex-wrap" style="font-size: 12px;">
				<view style="width: 50%;margin-top: 8px;">
					<view style="color: #666666;">{{$t('发起人')}}</view>
					<view class="over-hide-1" v-if="lang=='zh'" style="
					width: 80%;
					white-space: pre-wrap; 
					font-size: 14px;
					color: #1D1D1D;
					margin-top: 8px;
					word-wrap:break-word;
					word-break: break-all">{{order.user.username}}</view>
					<view class="over-hide-1" v-if="lang=='ru'" style="
					width: 80%;
					white-space: pre-wrap; 
					font-size: 14px;
					color: #1D1D1D;
					margin-top: 8px;
					word-wrap:break-word;
					word-break: break-all">{{order.user.username_ru}}</view>
				</view>
				<view style="width: 50%;margin-top: 8px;">
					<view style="color: #666666;">{{$t('服务人')}}</view>
					<view class="over-hide-1" v-if="lang=='zh'" style="
					width: 80%;
					white-space: pre-wrap;
					 font-size: 14px;
					 color: #1D1D1D;
					 margin-top: 8px;
					 word-wrap:break-word;
					 word-break: break-all">{{order.matchingValue.username || $t('正在匹配')}}</view>
					 <view class="over-hide-1" v-if="lang=='ru'" style="
					 width: 80%;
					 white-space: pre-wrap;
					  font-size: 14px;
					  color: #1D1D1D;
					  margin-top: 8px;
					  word-wrap:break-word;
					  word-break: break-all">{{order.matchingValue.username_ru || $t('正在匹配')}}</view>
				</view>
				<view style="width: 50%;margin-top: 20px;margin-bottom: 12px;">
					<view style="color: #666666;">{{$t('语音时间')}}</view>
					<view class="" style="font-size: 14px;color: #1D1D1D;margin-top: 8px;" v-if="lang=='zh'">{{order.start_timeValue_arr.name}}</view>
					<view class="" style="font-size: 14px;color: #1D1D1D;margin-top: 8px;" v-if="lang=='ru'">{{order.start_timeValue_arr.name_ru}}</view>
				</view>
			</view>
			<view class="center_box_bottom flex flex-item-grow-1" v-if="lang=='zh'" >
				<view class="center_box_bottomleft" v-if="order.is_real_time==1&&order.meet_Status === 'pending'" style="padding:12px 0" :style="order.meet_Status === 'pending'?'':'margin-top: 12px;border-bottom-right-radius: 8px'" :class="order.meet_Status === 'pending'?'width-allself':'width-all'" @click="closeChange(order)">{{$t('取消订单')}}</view>
				<view class="center_box_bottomleft" v-if="order.is_real_time==1&&order.meet_Status === 'complete'" style="margin-top: 12px;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;"  :class="order.meet_Status === 'pending'?'width-allself':'width-all'" @click="selectFaChange(order)">{{$t('进入语音')}}</view>
				<view class="center_box_bottomleft" v-if="order.is_real_time==0&&order.meet_Status != 'complete'" :class="order.meet_Status === 'pending'?'center_box_bottomleft1':'center_box_bottomleft2'" @click="closeChange(order)">{{$t('取消订单')}}</view>
				<view class="center_box_bottomright flex" v-if="order.is_real_time==0" :class="order.meet_Status === 'pending' || order.meet_Status === 'complete'?'center_box_bottomright1':'center_box_bottomright2'">
					<view style="width: 100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;" v-if="order.meet_Status === 'pending'">{{$t('等待服务人员发起沟通')}}{{ order.countdown}}</view>
					<view style="width: 50%;background-color: #06C36E;padding: 12px 0;" v-if="order.meet_Status === 'accepted'" @click="selectRenChange(order)">{{$t('更换服务人员')}}</view>
					<view style="width: 50%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;" v-if="order.meet_Status === 'accepted'" @click="submintRenChange(order)">{{$t('确定服务人员')}}</view>
					<view style="width:100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;" v-if="order.meet_Status === 'submit'">{{$t('距离语音开始')}}:{{order.manageCount}}</view>
					<view style="width:100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;" v-if="order.meet_Status === 'complete'"  @click="selectFaChange(order)">{{$t('进入语音')}}</view>
				</view>
				<view class="center_box_bottomright flex" v-if="order.is_real_time==1&&order.meet_Status === 'pending'" :class="order.meet_Status === 'pending'?'center_box_bottomright1':'center_box_bottomright2'">
					<view style="width: 100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;">{{$t('等待服务人员发起沟通')}}{{ order.countdown}}</view>
				</view>
			</view> 
		    <view class="center_box_bottom flex flex-item-grow-1" v-if="lang=='ru'">
				<view class="center_box_bottomleft" v-if="order.is_real_time==1&&order.meet_Status === 'pending'" style="padding: 12px 0" :style="order.meet_Status === 'pending'?'':'margin-top: 12px;border-bottom-right-radius: 8px'" :class="order.meet_Status === 'pending'?'width-allself':'width-all'" @click="closeChange(order)">Отмени заказ.</view>
				<view class="center_box_bottomleft" v-if="order.is_real_time==1&&order.meet_Status === 'complete'" style="margin-top: 12px;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;"  :class="order.meet_Status === 'pending'?'width-allself':'width-all'" @click="selectFaChange(order)">{{$t('进入语音')}}</view>
				<view class="center_box_bottomleftru" v-if="order.is_real_time==0&&order.meet_Status != 'complete'" :class="order.meet_Status === 'pending'?'center_box_bottomleft1':'center_box_bottomleft2'" @click="closeChange(order)">Отмени заказ.</view>
				<view class="center_box_bottomright flex" v-if="order.is_real_time==0" :class="order.meet_Status === 'pending'|| order.meet_Status === 'complete'?'center_box_bottomright1':'center_box_bottomright2'">
					<view style="width: 100%;
					background-color: #5C8DFF;
					border-bottom-right-radius: 8px;
					white-space: pre-wrap;
					word-wrap:break-word;
					word-break: break-all;height:80rpx
					" v-if="order.meet_Status === 'pending'">{{$t('等待服务人员发起沟通')}}{{order.countdown}}</view>
					<view style="width: 50%;
					background-color: #06C36E;
					white-space: pre-wrap;
					word-wrap:break-word;
					word-break: break-all;height:80rpx; " v-if="order.meet_Status === 'accepted'" @click="selectRenChange(order)">{{$t('更换服务人员')}}</view>
					<view style="width: 50%;
					background-color: #5C8DFF;
					border-bottom-right-radius: 8px;
					white-space: pre-wrap;
					word-wrap:break-word;
					word-break: break-all;height: 80rpx; 
					" v-if="order.meet_Status === 'accepted'" @click="submintRenChange(order)">{{$t('确定服务人员')}}</view>
					<view style="width:100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;" v-if="order.meet_Status === 'submit'">{{$t('距离语音开始')}}:{{order.manageCount}}</view>
					<view style="width:100%;background-color: #5C8DFF;padding: 12px 0;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;" v-if="order.meet_Status === 'complete'"  @click="selectFaChange(order)">{{$t('进入语音')}}</view>
				</view>
				<view class="center_box_bottomright flex" v-if="order.is_real_time==1&&order.meet_Status === 'pending'" :class="order.meet_Status === 'pending'?'center_box_bottomright1':'center_box_bottomright2'">
					<view style="
					background-color: #5C8DFF;
					border-bottom-right-radius: 8px;
					white-space: pre-wrap;
					word-wrap:break-word;
					word-break: break-all;height: 80rpx;">{{$t('等待服务人员发起沟通')}}{{order.countdown}}</view>
				</view>
			</view>
		</view>			
	</div>
</template>

<script>
	export default {
		props: ["MessageModalShow", "order"],
		data() {
			return {
			}
		},
		created() {},
		methods: {
			
		}
	}
</script>

<style lang="less" >
	
</style>